<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">

<body>
<script th:src="@{/static/plugins/ueditor/ueditor.config.js}"></script>
<script th:src="@{/static/plugins/ueditor/ueditor.all.min.js}"></script>
<script th:src="@{/static/plugins/ueditor/lang/zh-cn/zh-cn.js}"></script>
<style>
    .layui-form-select dl {
        z-index: 9999999999999999999999;
    }

</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">个人资料</div>
                <div class="layui-card-body">
                    <div class="layui-field-box">
                        <button type="button" class="layui-btn btn-sm" onclick="checkStatus()">查看审核状态</button>
                    </div>
                    <div class="layui-field-box">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md9">
                                <div>
                                    <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="layui-row" style="text-align:center">
                                    <img class="layui-upload-img" id="img1" style="width: 150px;height: 150px;"
                                         onerror="javascript:this.src='/static/images/userlogo0.png';" th:src="${frontUnion.picid}" >
                                </div>
                                <p></p>
                                <div style="text-align:center">
                                    <button type="button" style="width:150px" class="layui-btn" id="test1">修改头像</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  class="layui-row layui-col-space10">
                        <button type="button" class="layui-btn"
                                onclick="tijiao()">提交
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary" style="margin: 15px;"
                                onclick="history.go(-1)">返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">

    layui.config({
        base: '/static/layui/lay/modules/' //layui自定义layui组件目录
    }).use(['form', 'easyCropper','layer'], function () {
        var $ = layui.jquery
            ,form = layui.form
            ,layer = layui.layer
            ,easyCropper = layui.easyCropper;

        //创建一个头像上传组件
        easyCropper.render({
            elem: '#test1'
            , saveW: 150     //保存宽度
            , saveH: 150   //保存高度
            , mark: 1 / 1    //选取比例
            , area: '900px'  //弹窗宽度
            , url: "/save_image?type=union"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (url) { //上传完毕回调
                if(url.indexOf("Error") !== -1){
                    layer.msg('上传失败！', {icon: 2});
                }else{
                    layer.msg('上传成功！', {icon: 1});
                    $("#img1").attr('src', url);//添加随机数防止图片缓存
                }

            }
        });
    });

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    $(function () {
        var ue = UE.getEditor('editor');
        ue.addListener("ready", function () {
            //赋值
            if ([[${frontUnion.context}]]) {
                ue.setContent([[${frontUnion.context}]])
            }
        });
    });

    function tijiao() {
        var context = UE.getEditor('editor').getContent();
        var datas = {};
        datas["context"] = context;
        layer.confirm('确定提交？', function (index) {
            $.ajax({
                url: "/changeDescribe",
                async: false,
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(datas),
                success: function (data) {
                    if (data === "success") {
                        layer.open({
                            title: '信息'
                            , content: '提交成功！'
                            , end: function () {
                                location.reload();
                            }
                        });
                    } else {
                        layer.alert("提交失败", {icon: 2});
                    }
                }
            });
        })
    }

    function checkStatus() {
        if ([[${frontUnion.status}]]) {
            var status = [[${frontUnion.status}]];
            if (status === "dsh") {
                layer.msg("待审核！", {icon: 3});
            } else if (status === "yfb") {
                layer.msg("审核已通过！", {icon: 1});
            } else {
                    layer.open({
                        type: 2 //此处以iframe举例
                        , title: '打回意见'
                        , area: ['400px', '200px']
                        , shade: 0
                        , maxmin: true
                        , content: '/getOpinion?id=' + [[${frontUnion.id}]] + '&type=user'
                        , btn: ['确定'] //只是为了演示
                        , btn2: function () {
                            layer.closeAll();
                        }
                    });
            }

        } else {
            layer.msg("您还未提交过记录哦！");
        }
    }
</script>
<script type="text/javascript">

</script>
</body>

</html>
